<template>
    <div class="ff-search">
        <div class="search-input" :class="{focuseClass:focused===1}" @keydown.13="search">
            <span class="iconfont icon-sousuo"></span>
            <input v-model="text" type="text" @focus="focused=1" @blur="focused=0" ref="content" />
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            focused: 0,
            text: ''
        };
    },
    methods: {
        search() {
            this.$emit('search', this.text);
            this.$refs.content.blur();
        }
    }
};
</script>
<style lang="scss">
@import "../../assets/css/common.scss";
.ff-search {
  @include size(100%, 100%);
  margin-right: 26px;
  max-width: 350px;
  float: right;
  .search-input {
    border: $BORDER_COLOR 1px solid;
    border-radius: 6px;
    text-align: left;
    padding-left: 10px;
    margin-left: 30%;
    width: 70%;
    height: 32px;
    background: $WHITE_COLOR;
    @include transition;
    input {
      height: 32px;
      width: calc(100% - 26px);
      text-indent: 5px;
    }
    // .iconfont {
    //   display: inline-block;
    //   height: 100%;
    // }
  }
  .focuseClass {
    border: $MAIN_BLUE_COLOR 1px solid;
    width: 100%;
    margin-left: 0;
    .iconfont {
      color: $MAIN_BLUE_COLOR;
    }
  }
}
</style>
